<template>
  <div>
    <el-select
      v-if="len"
      :value="dicCode ? dicCode : val"
      style="width:202px;"
      :placeholder="value.dicName"
      @change="changeSelect"
    >
      <el-option
        v-for="item in value.children"
        :key="item.dicCode"
        :label="item.dicName"
        :value="item.dicCode"
      />
    </el-select>
  </div>
</template>

<script>
import { getCategory } from '@/utils/util';
export default {
  props: ['select', 'data', 'dicCode'],
  data() {
    return {
      val: ''
    }
  },
  computed: {
    value() {
      const result = getCategory({
        date: this.$props.select,
        field: this.$props.data
      })[0]
      return result
    },
    len() {
      return this.$props.select.length
    }
  },
  methods: {
    changeSelect(e) {
      this.val = e
      this.$emit('propsVal', e)
    }
  }
}
</script>

<style>
</style>
